<template>
  <view>
    <u-sticky
      :offset-top="0"
      :h5-nav-height="0"
      bgColor=""
      @fixed="fixed = true"
      @unfixed="fixed = false"
    >
      <view
        class="page-header"
        :style="[{ height: 'calc(' + statusBarHeight + 'px + 88rpx)',backgroundColor:fixed? '#fff':'' }]"
      >
        <!-- 页面标题 -->
        <view class="header-content" :style="[menuButtonStyle]">
          <view class="back-icon" @click="goBack" v-if="showBack">
            <i class="iconfont icon-fanhui" :style="[{color:fixed? '#262626':'#fff'}]"></i>
          </view>
          <text :style="[{color:fixed? '#262626':'#fff'}]">{{title}}</text>
        </view>
      </view>
    </u-sticky>
  </view>
</template>

<script>
export default {
  props: {
    title: {
      type: [String],
      default: '积分商城'
    },
  },
  data() {
    return {
      // 是否固定顶部
      fixed:false
    };
  },
  computed: {
    menuButtonStyle() {
      // #ifdef APP-PLUS || H5
      let obj = {
        top: this.statusBarHeight + "px",
        height: "88rpx",
        lineHeight: "88rpx",
      };
      // #endif
      // #ifndef APP-PLUS || H5
      let obj = {
        top: this.menuButtonInfo.top + "px",
        height: this.menuButtonInfo.height + "px",
      };
      // #endif
      let textAlign = "center";
      obj["justifyContent"] = textAlign;
      return obj;
    },
    showBack() {
      let routes = getCurrentPages() || [];
      if (routes && routes.length > 1) return true;
      return false;
    },
    menuButtonInfo() {
      // #ifndef APP-PLUS || H5
      let menuButtonInfo = uni.getMenuButtonBoundingClientRect();
      return menuButtonInfo;
      // #endif
    },
  },
  methods: {
    goBack() {
      this.$utils.goBack();
    },
  },
  filters: {},
  mounted() {},
};
</script>

<style scoped lang="scss">
.page-header {
  width: 100%;
  z-index: 1000;
  font-family: PingFang SC;
  .header-content {
    width: 93.6%;
    font-size: 36rpx;
    font-weight: 600;
    text-align: center;
    position: absolute;
    left: 4%;
    top: 0;
    z-index: 11;
    display: flex;
    justify-content: center;
    align-items: center;
    .back-icon {
      height: 100%;
      position: absolute;
      left: 0;
      top: 0;
      z-index: 111;
      display: flex;
      align-items: center;
    }
  }

  .md-section {
    width: calc(100% - 108px);
    height: 32px;
    position: absolute;
    left: 7px;
    top: 0;
    z-index: 11;
    display: flex;
    align-items: center;
    .md-media {
      width: 6.4vw;
      height: 6.4vw;
      background: #f2f2f2;
      border: 1px solid #ffffff;
      border-radius: 50%;
      margin-right: 1.6vw;
      overflow: hidden;
      image {
        width: 100%;
        height: 100%;
        display: block;
      }
    }
    .md-name {
      font-size: 28rpx;
      font-family: PingFang SC;
      font-weight: 600;
      color: #ffffff;
      max-width: 85%;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .icon-arrow-right {
      font-size: 21rpx;
      font-weight: bolder;
      position: relative;
      color: #ffffff;
    }

    .icon-map-filling1 {
      font-size: 18px;
      position: relative;
      color: #ffffff;
    }
  }
  .black-md {
    .iconfont,
    .md-name {
      color: #000000;
    }
  }
}
.hold-place {
  width: 100%;
}
</style>
